<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.check_pass {
    color: green;
}

.check_fail {
    color: red;
}

i {
    font-size: 20px;
}
</style>
</head>
<body>
<form name="form1" action="#" method="post" enctype="application/x-www-form-urlencoded">
    用户:<input type="text" name="user"><i class="abc"></i><br>
    密码:<input type="password" name="pwd"><i></i><br>
    确认密码: <input type="password" id="pwdConfirm"><i></i><br>
    电话号码: <input type="number" name="phone"><i></i><br>
    邮箱: <input type="text" name="email"><i></i><br>
    <input type="submit" value="注册">
</form>
<script>
document.form1.user.onblur = function (){
    //长度3-15, 只能是数字字母下划线, 不能数字开头
    var re = /^[a-z_]\w{2,14}$/gi;
    checkInput(this, re, "此用户名允许注册", "你的输入有误: 长度3-15, 只能是数字字母下划线, 不能数字开头");
}

document.form1.pwd.onblur = function (){
    var re = /^.{6,20}$/gi;
    checkInput(this, re, "密码可用", "你的密码过于简单: 请输入6-20位的密码");
}

document.getElementById("pwdConfirm").onblur = function (){
    if (this.value == document.form1.pwd.value){
        this.nextElementSibling.innerHTML = "密码一致"
    }else{
        this.nextElementSibling.innerHTML = "两次密码不一致, 请重新输入"
        this.focus();
    }
}

document.form1.phone.onblur = function (){
    console.log(this.value);
    var re = /^1[3678]\d{9}$/gi;
    checkInput(this, re, "电话号码可用", "电话号码有误, 请认真输入");
}

document.form1.onsubmit = function (e){
    e.preventDefault();
    this.user.onblur()
    this.pwd.onblur()
    this.phone.onblur()
}

function checkInput(input, regExp, passText, failText){
    var val = input.value;
    var className = input.nextElementSibling.className;
    if (regExp.test(val)){
        input.nextElementSibling.innerHTML = passText;

        input.nextElementSibling.className =
            className.replace(/ check_fail/gi, "");
        if (!/check_pass/gi.test(className)){
            input.nextElementSibling.className += " check_pass";
        }
    }else{
        input.nextElementSibling.innerHTML = failText;
        input.nextElementSibling.className =
            className.replace(/ check_pass/gi, "");
        if (!/check_fail/gi.test(className)){
            input.nextElementSibling.className += " check_fail";
        }
    }
}

</script>
</body>
</html>